<template>
	<div class="end">		
		<div class="gray"></div>
		<ul class="list" v-for="(item,index) in Endlist">
			<li class="li" v-for="(item,index) in item.Endlist1"><a href="javascript:void(0)"  @click="num=index">{{item.id}}</a></li>			
		</ul>
	</div>
	
		<ol class="list-item" v-if="num===0" v-for="(item,index) in Endlist">
			<li v-for="(item,index) in item.Endlist2">{{item.id}}</li>
		</ol>
		<ol class="list-item" v-if="num===1" v-for="(item,index) in Endlist">
			<li v-for="(item,index) in item.Endlist3">{{item.id}}</li>
		</ol>
		<ol class="list-item" v-if="num===2" v-for="(item,index) in Endlist">
			<li v-for="(item,index) in item.Endlist4">{{item.id}}</li>
		</ol>
		<ol class="list-item" v-if="num===3" v-for="(item,index) in Endlist">
			<li v-for="(item,index) in item.Endlist5">{{item.id}}</li>
		</ol>
	
	

</template>

<script>
	export default{
		props:['Endlist'],
		data(){
			return{
				num:0
			}
		},
		methods:{
			change(val){
				
			}
		},
	
	}
</script>

<style scoped>
	.gray{
		width: 100%;
		height: 0.17rem;
		background-color: #cccccc;
	}
	.list{
		display: flex;
		margin-top: 0.3rem;
		padding-bottom: 0.2rem;
		border-bottom: 1px solid #cccccc;
	}
	.li{
		flex: 1;
		font-size: 0.27rem;		
		
	}
	.li a{
		color: black;		
	}
	.list-item{
		background-color: white;
		color: #212121;
		position: relative;
		overflow: hidden;
		margin-top: 0.1rem;
		margin-bottom: 1rem;
	}
	.list-item li{
		width: 20%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border: 1px solid #cccccc;
		margin: 0.2rem 0.167rem;
		border-radius: 5px;
		font-size: 0.28rem;
		color: #cccccc;
	}
	
</style>